<!-- task manage 任务管理页面  -->
<div class="container" :important="task">
    <script>

        function taskDetail(value, row, index) {

            return "<button class='btn btn-warning taskJd'>任务阶段</button>"
        }

        function taskDetails(value, row, index) {
            return "<button class='btn btn-warning taskInfo'>任务详情</button>"
        }

        function taskState(value, row, index) {

            if ( row.taskState == '2'){
                return "<button class='btn btn-danger'>未审核</button>"
            } else if( row.taskState == '0'){
                return "<button class='btn btn-info'>待上报</button>"
            } else if( row.taskState == '1'){
                return "<button class='btn btn-success'>已完成</button>"
            }
        }


    </script>
	<style>
		textarea{
			min-height:200px;
		}

	</style>

    <div>

        <!-- Tab panes -->
        <div class="tab-content">

            <!-- 任务操作 -->
            <div id="queryTask">
                <!--  handler area -->
                <div class="row handler">

                    <span><i style="font-size: 15px" class="iconfont">&#xe601;</i>功能模块</span>
                    <hr>

                    <div class="btnBlock" type="f">
                        <div>
                            <i class="iconfont">&#xe6e4;</i>
                            <span style="vertical-align: super;">查询任务</span>
                        </div>
                        <div class="triangle" type="display"></div>
                    </div>

                    <div class="btnBlock" type="t" id="bbb" :click="@delTaskModal">

                        <div>
                            <i class="iconfont">&#xe606;</i>
                            <span style="vertical-align: super;">删除任务</span>
                        </div>
                    </div>

                    <div class="btnBlock" type="s" id="aaa" :click="@reviewTaskModal">

                        <div>
                            <i class="iconfont">&#xe69d;</i>
                            <span style="vertical-align: super;">审核任务</span>
                        </div>
                    </div>


                    <div class="btnarea">
                        <!-- 查询操作 -->
                        <form role="form" class="form-horizontal" data-parsley-validate="" novalidate="">

                            <div class="form-group">

                                <!--时间-->
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">开始时间</label>
                                    <div class="col-sm-2">
                                        <div class="input-group date" data-provide="datepicker">
                                            <input type="text" class="form-control" :duplex="@query.startTime">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <label class="col-sm-1 control-label">结束时间</label>
                                    <div class="col-sm-2">
                                        <div class="input-group date" data-provide="datepicker">
                                            <input type="text" class="form-control" :duplex="@query.endTime">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 选择支队开始-->
                                    <div :if="@query.displaySelect == 'total' ? true : false ">
                                        <label class="col-sm-1 control-label">选择支队</label>
                                        <div class="col-sm-2">
                                            <select id="queryOfficeType" class="form-control">
                                                <option disabled selected value="">--请选择--</option>
                                                <option :for="el in @send.teamLIst" :attr="{value : el.groupId}">{{el.groupName}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- 选择支队结束-->
                                </div>

                                <button type="button" class="btn btn-primary btn-right" id="query" :click="@queryTask">查询</button>
                            </div>

                        </form>
                    </div>

                    <div></div>
                    <br>
                    <span><i style="font-size: 15px" class="iconfont">&#xe6d6;</i>列表展示</span>
                    <hr>
                </div>


                <!-- data -->
                <div class="row data">
                    <div>
                        <table id="taskTable"  data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="client" data-page-number="1" data-page-size="5">
                            <thead>
                            <tr>
                                <th data-field="state" data-radio="true"></th>
                                <th data-field="taskName" data-sortable="true">任务名称</th>
                                <th data-field="taskTypeName" data-sortable="true">任务类型名称</th>
                                <th data-field="depTypeName" data-sortable="true">科室名称</th>
                                <th data-field="branchName" data-sortable="true">支队名称</th>
                                <th data-field="releaseTime" data-sortable="true">发布时间</th>
                                <th data-field="startTime" data-sortable="true">开始时间</th>
                                <th data-field="endTime" data-sortable="true">结束时间</th>
                                <th data-field="taskWeight" data-sortable="true" data-width="100">权重</th>
                                <th data-field="operate" data-formatter="taskDetail" data-events="detailEv"></th>
                                <th data-field="taskDetails" data-formatter="taskDetails" data-events="showTaskDetail"></th>

                                <th data-field="operate" data-formatter="taskState">状态</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 任务删除 modal -->
    <div class="modal fade" id="delTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>确定删除任务？</h5>
                </div>
                <div class="modal-body">
                    <p>注意</p>
                    <p style="color: red">
                        删除操作不可逆，且只能删除自己所创建的。
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" :click="@delTask">确定删除</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 任务审核 modal -->
    <div class="modal fade" id="reviewTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>审核</h5>
                </div>

                <form style="text-align: center;padding: 20px;">
                    <div class="form-group">
                        <input style="margin: 0 20px" type="radio" name="agree" value="agree" :duplex="@approval">通过
                        <input style="margin: 0 20px" type="radio" name="agree" value="reject" :duplex="@approval">不通过
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" :click="@reviewTask">提交</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 任务阶段详情 modal -->
    <div class="modal fade" id="taskDetail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title" id=""><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>任务阶段详情</h5>
                </div>
                <div class="modal-body" id="taskDetailModalBody">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" :click="@clear">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 任务详细信息modal -->
    <div id="taskDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding: 0 !important;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body taskinfo">
                    <form id="sendTask" role="form" class="form-horizontal" data-parsley-validate="" novalidate="">
                        <div class="form-group">
                            <p class="col-sm-2">任务名称</p>
                            <div class="col-sm-10">
                                <p id="taskDetailName"></p>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <p class="col-sm-2">任务内容</p>
                            <div class="col-sm-10">
                                <p id="taskDetailContent"></p>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <p class="col-sm-2"></p>
                            <div class="col-sm-10">
                                <p class="btn btn-success">
                                    <a id="taskDetailFile" target="_blank" style="text-decoration: none">下载文件</a>
                                </p>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
